<template>
  <div style="padding: 30px">
    <div class="head-btns">
      <el-button size="small" type="primary" @click="validate">
        校验
      </el-button>
    </div>
    <div class="activity-edit__container">
      <!-- 左右布局，左侧预览，右侧配置 -->
      <div class="activity-edit__left">
        <div class="activity-phone-nav">
          <div class="title">
            {{ 123 }}
          </div>
        </div>
        <!-- <iframe id="activity" ref="activity" :src="url" frameborder="0" /> -->
      </div>
      <pu-render
        ref="renderer"
        class="activity-edit__right"
        :form-data="formData"
        :config="jsonConfig"
        :timeStatus="timeStatus"
      />
    </div>
  </div>
</template>
<script>
import jsonConfigDefault from "./jsonConfig.js";
export default {
  provide() {
    return {
      // setProvideMap: this.setProvideMap,
      updateFormDataByKey: this.updateFormDataByKey,
      // provMap: {
      //   unMarkedSkuCountMap: {}, // 编辑sku库存差值
      //   unMarkedSpuCountMap: {}, // 编辑spu库存差值
      // },
    };
  },
  data() {
    return {
      jsonConfig: {},
      formData: {},
      // 1-活动未开始 2-活动已开始 3-活动已结束
      timeStatus: 1,
    };
  },
  computed: {},
  created() {
    var data = jsonConfigDefault;
    this.updateJson(data);
  },
  methods: {
    // 校验
    validate() {
      if (!this.$refs.renderer.validate()) {
        this.$message({
          message: "内容填写不完整！",
          type: "warning",
        });
        return false;
      }
      this.$message({
        message: "ok",
        type: "warning",
      });
      return true;
    },
    updateJson(data) {
      this.formData = this.getFormData(data, {});
      this.jsonConfig = data;
    },
    getFormData(config, formData = {}) {
      formData = {
        ...formData,
      };
      for (const key in config) {
        console.log("key==", key, config[key].value);
        if (config[key].value !== undefined) {
          if (key.indexOf(",") !== -1) {
            // TODO
            console.log("暂不考虑key中有‘，’的情况");
          } else {
            formData[key] = config[key].value;
          }
        }
        if (config[key].type === "el-tabs") {
          formData[key + "ActiveTab"] = config[key].value;
          for (const childKey in config[key].props.options) {
            formData = this.getFormData(
              config[key].props.options[childKey].content,
              formData
            );
          }
        }
      }
      return formData;
    },
    updateFormDataByKey(key, value) {
      if (key.indexOf(",") === -1) {
        this.formData = { ...this.formData, [key]: value };
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head-btns {
  padding-bottom: 12px;
  margin-bottom: 16px;
  text-align: right;
  box-shadow: 0px 1px 0px 0px #ebedf0;
}
.activity-edit {
  &__container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: top;
    height: 100%;
  }
  &__left {
    // position: relative;
    flex-shrink: 0;
    position: sticky;
    top: 10px;
    width: 375px;
    height: 730px;
    border: 1px solid #e2e2e2;
    margin-right: 12px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 15%);
    overflow: hidden;
    pointer-events: none;
    background: #f5f5f5;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    .activity-phone-nav {
      height: 65px;
      background: url(//yun.duiba.com.cn/img/zhongyan/35b92ade-bb5f-4a64-bcd3-f0a6636da59c.png)
        no-repeat;
      background-size: contain;
      line-height: 80px;
      text-align: center;
      padding: 0 100px;
      z-index: 9;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    #activity {
      width: 100%;
      height: calc(100% - 65px);
    }
  }
  &__right {
    flex: 1;
    border-left: 1px solid #e2e2e2;
    padding-left: 12px;
  }
}
</style>
